<template>
    <div>
        <!-- 轮播图 区域 -->
        <swiper :lunbotulist="lunbotuList" :isfull="true"></swiper>

        <!-- 九宫格 到 六宫格 的改造工程 区域 -->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/newslist">
                    <!-- <span class="mui-icon mui-icon-home"></span> -->
                    <img src="../../images/menu1.png" alt="">
                    <div class="mui-media-body">新闻资讯</div></router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/photolist">
                    <!-- <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span> -->
                    <img src="../../images/menu2.png" alt="">
                    <div class="mui-media-body">图片分享</div></router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/goodslist">
                    <!-- <span class="mui-icon mui-icon-chatbubble"></span> -->
                    <img src="../../images/menu3.png" alt="">
                    <div class="mui-media-body">商品购买</div></router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="#">
                    <!-- <span class="mui-icon mui-icon-location"></span> -->
                    <img src="../../images/menu4.png" alt="">
                    <div class="mui-media-body">留言反馈</div></router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="#">
                    <!-- <span class="mui-icon mui-icon-search"></span> -->
                    <img src="../../images/menu5.png" alt="">
                    <div class="mui-media-body">视频专区</div></router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="#">
                    <!-- <span class="mui-icon mui-icon-phone"></span> -->
                    <img src="../../images/menu6.png" alt="">
                    <div class="mui-media-body">联系我们</div></router-link>
            </li>
        </ul> 

    </div>
</template>

<script>
// 弹窗
import { Toast } from "mint-ui";

// 导入轮播图组件
import swiper from '../subcomponents/swiper.vue';


export default {
  data() {
    return {
      // 获取得到的轮播图数据
      lunbotuList: [
        {
          pid:1,
          img_name: "zhangsan",
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg"
        },
        {
          pid:2,
          img_name: "lisi",
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476438076&di=6fcd124af750ba621ce0e43f5bf25732&imgtype=0&src=http%3A%2F%2Fwww.m1ok.com%2Fupload%2Fnetpic2%2F2017-06-28-10-59-5262650279229.jpg"
        },
        {
          pid:3,
          img_name: "wangwu",
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476453371&di=bea1e6b95f94e7238e73ad8bc213807a&imgtype=0&src=http%3A%2F%2Fimg06.tooopen.com%2Fimages%2F20170221%2Ftooopen_sy_199240913125.jpg"
        },
        {
          pid:4,
          img_name: "w111angwu",
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476453371&di=bea1e6b95f94e7238e73ad8bc213807a&imgtype=0&src=http%3A%2F%2Fimg06.tooopen.com%2Fimages%2F20170221%2Ftooopen_sy_199240913125.jpg"
        }
      ]
    };
  },
  created() {
    this.getLunbotu();
  },
  methods: {
    // 获取轮播图数据的方法
    getLunbotu() {
      // this.$http.get('http://vue.studyit.io/api/getlunbo').then(result=>{
      //    if(result.body.status ===0){
      //        // 成功后，返回
      //        this.lunbotuList = result.body.message;
      //        Toast('加载完毕!')
      //    }else{
      //        // 状态码错误，失败后，返回
      //         Toast('加载轮播图失败!')
      //    }
      // })
      if (this.lunbotuList != "") {
        let instance = Toast({
          message: "加载轮播图成功!",
          duration: 1000,
          position: "middle",
        });
        setTimeout(() => {
          instance.close();
        }, 2000);
        
      } else {
        Toast("加载轮播图失败!");
      }
    },
    },
    components:{
      swiper
    }
};
</script>

<style lang="scss" scoped>
// .mint-swipe {
//   height: 180px;
// }
// // 给每个轮播图增加不同背景颜色
// // .mint-swipe-item:nth-child(1){
// //     background-color: red;
// // }
// // .mint-swipe-item:nth-child(2){
// //     background-color:rgb(229, 255, 0);
// // }
// // .mint-swipe-item:nth-child(3){
// //     background-color: rgb(0, 153, 255);
// // }

// // 设置轮播图的宽高
// .mint-swipe-item {
//   img {
//     width: 100%;
//     height: 100%;
//   }
// }
// 设置 ul 的背景色和边框
.mui-grid-view.mui-grid-9 {
  background-color: #fff;
  border: none;
  img {
    width: 60px;
    height: 60px;
  }
  .mui-media-body {
    font-size: 13px;
  }
}
// 设置 li 的背景色
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  padding: 5px 15px;
  border: none;
}
</style>

